<template>
  <div class="container">
    <div class="app-container">
      <el-card class="box-card">
        <el-row type="flex" justify="space-between">
          <el-col :span="24">
            <el-button size="medium" type="primary" @click="add(null,'add')">添加分类</el-button>
          </el-col>
          <el-col :span="24">
            <el-input v-model="params.title_contains" placeholder="请输入关键字" @input="search">
              <el-button slot="append" icon="el-icon-search" />
            </el-input>
          </el-col>
        </el-row>
        <el-divider />
        <el-table :data="cateList" style="width: 100%" border>
          <el-table-column align="center" label="图片" prop="image">
            <template v-slot="{row}">
              <el-image :src="row.image" style="width: 200px; height: 200px" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="标题" prop="title" />
          <el-table-column align="center" label="介绍" prop="desc" />
          <el-table-column align="center" label="操作">
            <template v-slot="{row}">
              <el-button plain size="mini" type="primary" @click="edit(row.id,'edit')">编辑</el-button>
              <el-button plain size="mini" type="danger" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider />
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentPage"
          />
        </el-row>
      </el-card>
      <!-- 添加、编辑分类弹窗 -->
      <el-dialog :title="title" :visible="showDialog" width="800px" @close="cancel">
        <el-form ref="form" :model="formData" :rules="rules">
          <el-form-item label="标题" label-width="80px" prop="title">
            <el-input v-model="formData.title" />
          </el-form-item>
          <el-form-item label="描述" label-width="80px" prop="desc">
            <el-input v-model="formData.desc" type="textarea" rows="3" />
          </el-form-item>
          <el-form-item label="封面" label-width="80px" prop="image">
            <!-- 图片上传 -->
            <ImgUpload v-model="formData.image" />
          </el-form-item>
          <el-form-item>
            <el-row type="flex" justify="end">
              <el-button size="mini" type="primary" @click="submit">确定</el-button>
              <el-button size="mini" @click="cancel">取消</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import { addCategory, categoriesDetails, delCategory, getCate, getCateList, updateCategory } from '@/api/categories'
import ImgUpload from './components/img-upload.vue'
export default {
  components: { ImgUpload },
  data() {
    return {
      imageUrl: '',
      cateList: [
        // id: null, // id
        // image: '', // 图片
        // title: '', // 标题
        // desc: ''// 介绍
      ], // 分类列表
      params: {
        _limit: 2, // 每页的获取条数
        _start: 0, // 开始获取的位置
        title_contains: '' // 模糊搜索title
      },
      showDialog: false, // 控制弹窗显示
      formData: {
        title: '', // 标题
        desc: '', // 描述
        image: '' // 封面图
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        desc: [{ required: true, message: '请输入描述', trigger: 'blur' }]
      },
      total: 1, // 分类总数量
      openTitle: '' // 弹窗标题
    }
  },
  computed: {
    title() {
      if (this.openTitle === 'add') {
        return '添加分类'
      } else {
        return '编辑分类'
      }
    }
  },
  created() {
    this.getCateList()
    this.getCate()
  },
  methods: {
    async getCateList() { // 获取分类管理列表
      const res = await getCateList(this.params)
      this.cateList = res.data
    },
    async getCate() { // 获取分类数量
      const res = await getCate(this.params.title_contains)
      this.total = res.data * 5
    },
    async currentPage(val) { // 点击分页实现
      this.params._start = (val - 1) * this.params._limit
      await this.getCateList()
    },
    add(id, txt) { // 添加
      this.openTitle = txt
      this.showDialog = true
    },
    async submit() { // 确认添加
      // 表单校验
      await this.$refs.form.validate()
      if (this.openTitle === 'edit') {
        await updateCategory(this.formData)
        this.$message.success('修改分类成功')
      } else {
        await addCategory(this.formData)
        // 提示
        this.$message.success('添加分类成功')
      }
      // 退出弹窗
      this.cancel()
      // 刷新列表
      this.getCateList()
      this.getCate()
    },
    cancel() { // 关闭弹窗
      this.showDialog = false
      // 清空表单数据
      this.formData = {
        title: '', // 标题
        desc: '', // 描述
        image: '' // 封面图
      }
    },
    search() { // 搜索
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(async() => {
        this.getCateList()
        const res = await getCate({
          title_contains: this.params.title_contains
        })
        this.total = res.data
      }, 500)
    },
    async edit(id, txt) { // 数据回显
      this.openTitle = txt
      const res = await categoriesDetails(id)
      this.formData = res.data
      this.showDialog = true
    },
    async del(id) { // 删除分类
      console.log(id)
      await delCategory(id)
      this.$message.success('删除成功')
      // 刷新列表
      this.getCate()
      this.getCateList()
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
